<template>
	<view class="check-yzm">
		<view class="code-box">
			<input :focus="focus" v-model="code" type="number" class="input" maxlength="6" @input="inputHandle" @tap="tapInput"/>
			<view class="line-box">
				<view class="line" :class="i<=code.length?'a-line':''" v-for="(item, i) in 6"> </view>
			</view>
		</view>
		<view class="timeup" v-if="isTimeOut">
			<uni-countdown color="#FF3B1E" :second="60" :font-size="12"
				:showDay="false" :showHour="false" :showMinute="false" @timeup="timeup" /> 
			&nbsp;秒后可重新发送验证码
		</view>
		<view class="btn" v-else @tap="getYzmCode"> 获取验证码 </view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { GetYzmApi, SMSAuthApi } from '@/service/index.js'
	const props = defineProps(['pageType', 'phone'])
	const emit = defineEmits(['checkYzmEnd'])
	const isTimeOut = ref(false) // 是否显示倒计时
	const code = ref('')
	const focus = ref(true)
	const inputHandle = () => {
		if(code.value.length == 6) {
			focus.value = false
			let params = {
				type: props.pageType ==1? 'register': 'forget',
				mobile: props.phone,
				code: code.value
			}
			SMSAuthApi(params).then(res => {
				emit('checkYzmEnd', {pageNum: 2, code: params.code})
			})
		}
	}
	const tapInput = () => {
		if(!focus.value) {
			code.value = ''
			focus.value = true
		}
	}
	// 倒计时结束
	const timeup = () => isTimeOut.value = false
	// 获取验证码
	const getYzmCode = () => {
		let params = {
			mobile: props.phone,
			type: props.pageType ==1 ? 'register': 'forget'
		}
		GetYzmApi(params).then(res => {
			isTimeOut.value = true
		}).catch(err => {
			uni.navigateBack()
		})
	}
	onLoad(() => {
		getYzmCode()
	})
</script>

<style lang="scss" scoped>
	.check-yzm {
		.code-box {
			width: 310px;
			height: 40px;
			margin: 0 auto;
			margin-top: 44px;
			transform: translateX(18px);
			.line-box {
				display: flex;
				transform: translateX(-12px);
				.line {
					width: 40px;
					height: 1px;
					background-color: #E4E4E4;
					margin-right: 11px;
					&:nth-last-of-type(1) {
						margin-right: 0;
					}
					&.a-line {
						background-color: #FF3B1E;
					}
				}
			}
			.input {
				height: 39px;
				color: #FF3B1E;
				font-size: 24px;
				font-weight: 400;
				letter-spacing: 37px;
			}
		}
		.yzm-box {
			display: flex;
			margin-top: 40px;
			align-items: center;
			justify-content: space-between;
			.item {
				width: 40px;
				height: 40px;
				display: flex;
				color: #FF3B1E;
				font-size: 24px;
				font-weight: 400;
				align-items: center;
				justify-content: center;
				border-bottom: #FF3B1E solid 1px;
				input {
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 40px;
				}
			}
		}
		.timeup {
			display: flex;
			color: #FF3B1E;
			font-size: 14px;
			font-weight: 400;
			margin-top: 19px;
			line-height: 14px;
			align-items: center;
		}
		.btn {
			height: 50px;
			color: #ffffff;
			font-size: 17px;
			margin-top: 50px;
			font-weight: 500;
			line-height: 50px;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
	}
</style>